<template>
  <ModuleContainer :moduleBase="module.attrs">
    <div class="homeNavbar" @click.stop="controlClick">
      <div class="topBox">
        <div class="logo" v-if="module.attrs.logo.imgType != 2">
          <template v-if="module.attrs.logo.imgType != 2">
            <img
              class="item-nav-img"
              :src="module.attrs.logo.url"
              v-if="module.attrs.logo.imgType == 3 && module.attrs.logo.url"
            />
            <img
              class="item-nav-img"
              src="http://xcxdownload.warelucent.cc/31/HomeCustom/20210521192234804/%E9%82%BB%E9%87%8Ce%E8%B4%AD@2x.png"
              v-if="module.attrs.logo.imgType == 1"
            />
          </template>
        </div>
        <div class="input" :style="{ width: module.attrs.logo.imgType == 2 ? '260px' : '180px' }">
          <img src="@/assets/imgs/searchIcon.png" alt="" />
          <textParse :textAttr="module.attrs.inputText" />
        </div>
        <div class="menuIcon"><img src="@/assets/imgs/xcx.png" /></div>
      </div>
    </div>
  </ModuleContainer>
</template>

<script>
export default {
  name: "pageHeader",
  props: {
    module: { type: Object },
    prev: { default: false },
  },
  data() {
    return {};
  },
  computed: {},
  methods: {
    controlClick() {
      if (!this.prev) {
        this.$parent.$parent.controlClick(this.module.type);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.homeNavbar {
  position: relative;
  width: 100%;
  height: 60px;
  .topBox {
    position: relative;
    width: 100%;
    height: 60px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 75px;
      height: 100%;
      //   height: 30px;
      z-index: 1;
      img {
        max-height: 60px;
      }
    }
    .input {
      display: flex;
      align-items: center;
      border: none;
      border-radius: 17px;
      min-width: 180px;
      height: 34px;
      text-indent: 1em;
      z-index: 1;
      background-color: #fff;
      padding: 0 20px;
      color: #a1a1a1;
      font-size: 14px;
      transition: all .3s linear;
      img {
        width: 17px;
        height: 17px;
      }
    }
    .menuIcon {
      z-index: 1;
      width: 72px;
      height: 30px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 30px;
    }
  }
}
</style>
